import { useEffect } from 'react'
import { useLocation } from 'react-router-dom' //  1 引入useLocation
import URL from 'url'

const Foo = () => {
	const location: any = useLocation() // 2 存储当前路由地址
	const param: any = URL.parse(window.location.href, true).query
	const url = param.url

	useEffect(() => {
		console.log('组件 => “', location.state?.name, '” 挂载...') // 相当于 componentDidMount、componentDidUpdate
		return () => console.log('组件 => “', location.state?.name, '” 解除挂载...') // 相当于 componentWillUnmount
	}, [location, location.state])
	return (
		<div className="interface-container">
			{url.includes('zichin') ? (
				<iframe
					src={url}
					title={url}
					style={{
						width: '100%',
						minHeight: '100vh',
						border: 'none',
					}}
				></iframe>
			) : (
				<div
					style={{
						padding: '100px 20px',
						textAlign: 'center',
					}}
				>
					<div>该地址不是https协议, 请手动点击</div>
					<a href={url} target="_blank" rel="noreferrer">
						{url}
					</a>
				</div>
			)}
		</div>
	)
}

export default Foo
